<template lang="pug">
    div(class="simple-maintenance-list")
        el-table(:data="data" @selection-change="selectionChange" border stripe @row-click="rowClick")
            template(v-if="config.hasSelection")
                el-table-column(type="selection")
            template(v-for="column in config.columns")
                template(v-if="column.type === 'Image'")
                  el-table-column(:key="column.prop" :prop="column.prop" :label="column.label")
                    template(slot-scope="scope")
                      el-image(style="width: 100px; height: 100px" 
                              :src="toAction(getValue(scope.row, column.path) || toAction(scope.row[column.prop]))" 
                              fit="cover")
                template(v-else-if="column.type === 'Switch'")
                  el-table-column(:key="column.prop" :prop="column.prop" :label="column.label")
                    template(slot-scope="scope")
                      el-switch(v-model="scope.row[column.prop]" 
                                :active-color="column.activeColor" 
                                :active-value="column.activeValue" 
                                :inactive-value="column.inActiveColor"
                                :active-text="column.leftText"
                                :inactive-text="column.rightText"
                                @change="switchChange(scope.row, column)")
                template(v-else)
                  el-table-column(:key="column.prop" :prop="column.prop" :label="column.label")
            template
                el-table-column
                  template(slot-scope="scope")
                    el-link(icon="el-icon-edit" @click.stop="editBtnClick(scope.row)") 编辑
        //- AwesomePagination(:page="page" :total="total" @change="getData")
</template>
<script>
import axios from "../../../plugins/axios";
import { AwesomePagination } from "awesome-element-ui";
import { mapActions } from "vuex";
import utilMixin from "./util-mixin";

export default {
  name: "mainTable",
  components: { AwesomePagination },
  mixins: [utilMixin],
  data() {
    return {
      data: [
        { id: 1, name: "smith", age: 18, birth: "2019-01-01" },
        { id: 2, name: "smith2", age: 28, birth: "2009-01-01" }
      ],
      total: 0,
      page: { skipCount: 0, maxResultCount: 10 }
    };
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          // 读取地址
          readAction: "",
          hasSelection: false,
          // 表格设置
          table: {
            selection: true,
            primary_key: "id"
          },
          // 列表项目
          columns: [
            { label: "编号", prop: "id" },
            { label: "姓名", prop: "name" },
            { label: "生日", prop: "birth" }
          ]
        };
      }
    }
  },
  computed: {
    filter() {
      return this.$store.state.data.filter;
    },

    primaryKey() {
      return this.$store.state.base.primaryKey;
    },

    mainId() {
      return this.$store.state.base.mainId;
    }
  },
  methods: {
    setCheckedRows(rows) {
      this.$store.dispatch("table/setCheckedRows");
    },
    getData() {
      var id = this.mainId;
      const data = { input: { page: this.page, id, filter: this.filter } };
      const options = {
        url: this.config.readAction || `maintenance/read`,
        method: "post",
        data
      };
      const vm = this;
      axios(options).then(paged => {
        vm.data = paged.items;
        vm.total = paged.totalCount;
      });
    },

    selectionChange(rows) {
      this.setCheckedRows(rows);
    },

    editBtnClick(row) {
      const id = row[this.$store.state.base.primaryKey];
      this.$store.dispatch("table/setEditId", id);
      this.$store.dispatch("status/showUpdate");
    },

    switchChange(row, column) {
      if (!column.changeAction) return; // 没有配置动作URL 不处理
      const data = { id: row[this.primaryKey] };
      data[column.prop] = row[column.prop];
      const options = { url: column.changeAction, method: "post", data };

      axios(options)
        .then(() => {})
        .catch(err => this.$message.error.error(err.message));
    },

    // 点击行事件
    rowClick(row) {
      this.$emit("row-click", row);
    }
  },
  created() {
    this.getData();
  }
};
</script>